<template>
    <div class="kefu">
        <TopDesc desc="সাহায্য এবং প্রতিক্রিয়া"></TopDesc>
        <van-form ref="form" :model="formData" class="form">
            <div class="Info"><span>*</span> প্রশ্নের ধরন</div>
            <van-field readonly clickable name="picker" :value="value"
                placeholder="একটি প্রতিক্রিয়া ধরন নির্বাচন করুন দয়া করে" @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>

            <div class="desc">অনুগ্রহ করে 12-সংখ্যার Ref.no সহ পরিশোধের একটি স্ক্রিনশট জমা দিন</div>

            <div class="Info"> <span>*</span>প্রশ্ন এবং পরামর্শ</div>
            <van-field v-model="formData.model.content" rows="2" autosize type="textarea" maxlength="50"
                placeholder="পরিশোধের পর আপডেট করা হয়নি প্রশ্ন এবং পরামর্শ প্রশ্ন এবং পরামর্শ প্রশ্ন এবং পরামর্শ প্রশ্ন এবং পরামর্শ"
                show-word-limit />
            <div class="Info">সমস্যা ছবি আপলোড করুন, শুধুমাত্র JPG এবং PNG</div>
            <van-uploader class="uploader" v-model="fileList" multiple :max-count="3" :after-read="afterRead" />
            <button class="btn" @click="onSubmit">জমা দেওয়া</button>
        </van-form>
    </div>
</template>

<script>
import { getfankuiTypeApI, postfankuiAPI, uploadFileApi } from "../../api";
import { jiami, jiemi } from "../../utils/AESKey.js";
import { Toast } from "vant";
export default {
    data() {
        return {
            formData: {
                model: {
                    typeId: '',
                    content: '',
                    images: [],
                    thirdOrderId: ''
                }
            },
            value: '',
            columns: [],
            showPicker: false,
            list: [],
            fileList: []
        };
    },
    methods: {
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
            console.log(value)
            console.log(this.columns)
            const index = this.columns.findIndex(item => item === value)
            this.formData.model.typeId = this.list[index].id
        },
        //提交
        async onSubmit() {
            const res = await postfankuiAPI(jiami(this.formData))
            try {
                console.log(jiemi(res.data))
                if (jiemi(res.data).status === 0) {
                    Toast('প্রতিক্রিয়া সাফল্য')
                    this.$router.push('/kefuList')
                }
            } catch (error) {

            }
        },
        //获取类型
        async getType() {
            const f = {
                id: this.$store.state.orderId
            }
            console.log(f, '获取类型参数')
            const res = await getfankuiTypeApI(jiami(f))
            console.log(jiemi(res.data))
            this.columns = jiemi(res.data).list.map(item => item.curName)
            this.list = jiemi(res.data).list
        },
        //文件上传
        async afterRead(file) {
            console.log(file, 'file')
            const newfile = await this.photoZip(file.file)
            const res = await uploadFileApi(newfile)
            try {
                console.log(newfile, 'newfile')
                console.log(jiemi(res.data), '上传文件的结果')
                this.formData.model.images.push(jiemi(res.data).model.id)
                console.log(this.fileList)
            } catch (error) {

            }
        },
        async photoZip(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    const base64 = reader.result;
                    const img = new Image();
                    img.src = base64;
                    img.onload = () => {
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        context.drawImage(img, 0, 0);
                        const quality = 0.7;
                        const maxWidth = 800;
                        const maxHeight = 800;
                        let newBase64 = canvas.toDataURL('image/jpeg', quality);
                        console.log(newBase64.length / 1024, '11111111111111')
                        while (newBase64.length / 1024 > 100) {
                            canvas.width *= 0.9;
                            canvas.height *= 0.9;
                            context.drawImage(img, 0, 0, canvas.width, canvas.height);
                            newBase64 = canvas.toDataURL('image/jpeg', quality);
                        }
                        const blob = this.dataURLtoBlob(newBase64);
                        const newFile = new File([blob], file.name, { type: 'image/jpeg' });
                        console.log(newBase64.length / 1024, '33333333')
                        // 返回file对象格式
                        resolve({ file: newFile, content: newBase64, message: '', status: '' });
                    }
                }
                reader.onerror = reject;
            }
            );
        },
        dataURLtoBlob(dataURL) {
            const arr = dataURL.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
    },
    created() {
        this.getType()
    }
};
</script>

<style lang="less" scoped>
.kefu {
    padding-top: (80/@a);

    .form {
        .btn {
            width: (330/@a);
            height: (53/@a);
            background: #415AB8;
            border-radius: (10/@a);
            text-align: center;
            margin-top: (33/@a);
            margin-left: (23/@a);
            line-height: (53/@a);
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
        }

        .desc {
            font-size: (9/@a);
            font-family: Nirmala UI;
            font-weight: 400;
            color: #B5B5B5;
            margin-left: (20/@a);
            margin-right: (20/@a);
        }

        .Info {
            font-size: (13/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #000000;
            margin-top: (20/@a);
            margin-left: (10/@a);

            span {
                color: #BB0A0A;
            }
        }

        .uploader {
            margin-left: (20/@a);
            margin-top: (20/@a);
        }
    }
}
</style>